<template>
  <div>

    <!--<div class="margin border_blue">
      <div slot="header" class="clearfix text-left color_blue padding-sm">
        <template >
          <span class="margin-right-xl">空运泡货优惠管理</span>
          <el-button size="mini" type="primary" @click="addRow()" style="float: right">新增</el-button>
        </template>
      </div>
      <div class="panel-body border_blue">
        <el-table class="table-data" size="mini" :data="tableData2" border style="width: 100%;background-color: rgb(233, 238, 243);border: black" >
          <el-table-column
            v-for="(item,index) in tableTitle"
            :key="index"
            align="center"
            :width="item.width"
            :label="item.label"
            :prop="item.prop">
            <template #default="scope">
               <span v-if="scope.row.isSet">

                 <input v-if="item.type =='input'" class="iteminput" placeholder="请输入" :value="sel[item.prop]" @change="inputChange($event,item.prop)"/>
                 <el-select v-if="item.type =='select'" v-model="sel[item.prop]" placeholder="请选择">
                  <el-option
                    v-for="it in item.options"
                    :key="it.value"
                    :label="it.label"
                    :value="it.label+'/'+it.value">
                  </el-option>
                </el-select>
               </span>
              <span v-else>
                  <span v-if="item.type =='input'">{{scope.row[item.prop]}}</span>
                  <span v-if="item.type =='select'">{{scope.row[item.prop].split('/')[0]}}</span>
                </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template #default="scope">
               <span class="el-tag el-tag&#45;&#45;primary  el-tag&#45;&#45;mini" style="cursor: pointer; margin-right:10px;" @click.stop="saveRow(scope.row,scope.$index)">
                 确定
               </span>
              <span class="el-tag el-tag&#45;&#45;primary el-tag&#45;&#45;mini" style="cursor: pointer; margin-right:10px;" @click="editRow(scope.row,scope.$index)">
                 编辑
               </span>
              <span class="el-tag el-tag&#45;&#45;danger el-tag&#45;&#45;mini" style="cursor: pointer; margin-right:10px;" @click="deleteRow(scope.$index,tableData2,scope.row)">
                 删除
               </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
-->

    <div class="margin border_blue">
      <div slot="header" class="clearfix text-left color_blue padding-sm">
        <template v-if="show === 1">
          <span class="margin-right-xl">空运重货优惠历史价格查看</span>
        </template>
        <template v-else>
          <span class="margin-right-xl">空运重货优惠管理</span>
          <el-button size="mini" type="primary" @click="importFile()"
            >导入文件填写案例
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="exportAmoebaBulkyHeavyCargo()"
            >导出所有渠道优惠信息</el-button
          >
          <el-button size="mini" type="primary" @click="bacthUpload()"
            >批量上传</el-button
          >
        </template>
      </div>

      <div v-if="show === 1">
        <el-form
          :model="queryForm"
          class="margin-top-sm padding-top "
          size="mini"
          label-width="70px"
        >
          <el-row>
            <el-col :span="4">
              <el-form-item label="渠道">
                <el-select
                  v-model="queryForm.customerChannelId"
                  filterable
                  placeholder="渠道"
                >
                  <el-option
                    v-for="(val, item) in channelMap"
                    :key="val"
                    :label="item"
                    :value="val"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3" class="text-center">
              <el-button type="primary" size="mini" @click="onSubmit">
                查询
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div
        class="margin border"
        v-for="item in tableData"
        :key="item.customerChannelId"
      >
        <div slot="header" class="clearfix text-left color padding-sm">
          <span class="text-bold margin-right">{{
            item.customerChannelName
          }}</span>
          <span>最后修改人： {{ userMap[item.cuser] }}</span>
          <span style="margin: 0 0 0 20px">修改时间：{{ item.cdate }}</span>
          <span v-if="show === 0">
            <el-button-group class="margin-left-xl">
              <el-button size="mini" type="success" @click="delData(item.id)"
                >删除
              </el-button>
              <el-button
                size="mini"
                type="success"
                @click="checkData(item.customerChannelId)"
                >查看历史数据</el-button
              >
            </el-button-group>
          </span>
        </div>
        <div class="panel-body">
          <table
            class="table-data"
            v-if="
              item.amoebaHeavyScales !== null &&
                item.amoebaHeavyWeightRanges !== null &&
                item.amoebaHeavyCargoPriceMap !== null
            "
          >
            <tr>
              <th width="150px">密度区间、重量段</th>
              <th
                align="center"
                v-for="row in item.amoebaHeavyScales"
                :key="row.id"
              >
                {{ row.scale }}
              </th>
            </tr>
            <tr
              v-for="weightRangeRow in item.amoebaHeavyWeightRanges"
              :key="weightRangeRow.id"
            >
              <td>{{ weightRangeRow.scale }}</td>
              <td v-for="scaleRow in item.amoebaHeavyScales" :key="scaleRow.id">
                {{
                  item.amoebaHeavyCargoPriceMap[
                    weightRangeRow.id + "_" + scaleRow.id
                  ]
                }}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

      <el-dialog
        title="批量上传空运重货优惠"
        :visible.sync="updateDialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-card>
          <el-link @click="exportUploadBulkyHeavyFormat()">下载模板</el-link>
        </el-card>
        <el-card>
          <el-upload
            class="upload-demo"
            drag
            action="batchUploadAmoebaBulkyHeavyCargo"
            :http-request="uploadFn"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">
              先下载模板，根据模板填入数据再上传
            </div>
          </el-upload>
        </el-card>
      </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
import { untransform } from "@/store/yg/common/uri";
export default {
  data() {
    return {
      tableTitle: [{
          label: "入库渠道",
          prop: "customerChannelId",
          width: "1250"
        },{
          label: "分泡比例",
          prop: "paocu",
          width: "300"
        }
      ],
      tableData2: [],
      sel: {}, //选中
      tableData: [],
      show: 0,
      channelMap: {},
      userMap: {
        1: "张三"
      },
      queryForm: {
        customerChannelId: null
      },
      updateDialogVisible: false
    };
  },
  mounted() {
    //console.log('rotur',this.$route)
    //console.log("this.customerChannelId",this.$route.query.customerChannelId);
    if (this.$route.query.customerChannelId) {
      this.queryForm.customerChannelId = parseInt(
        this.$route.query.customerChannelId
      );
      this.show = 1;
    }
    this.queryList();
  },
  watch: {
    //普通的watch监听
    tableData2(newName, oldName) {
      this.tableData2 = newName;
    }
  },
  methods: {
    onSubmit() {
      this.queryList();
    },
    queryList() {
      ajax("manageAmoebaBulkyHeavyCargo", this.queryForm)
        .then(res => {
          if (res.code == 200) {
            var data = res.data;
            this.channelMap = data.channelMap;
            if (data.amoebaBulkyHeavyCargos) {
              data.amoebaBulkyHeavyCargos.forEach(element => {
                if (data.channelMap) {
                  for (const key in data.channelMap) {
                    if (data.channelMap[key] === element.customerChannelId) {
                      element.customerChannelName = key;
                    }
                  }
                }
              });
              this.tableData = data.amoebaBulkyHeavyCargos;
            }
            if (data.userMap) {
              this.userMap = data.userMap;
            }

            console.log("this.tableData", this.tableData);
            //   var option = {
            //  id:1,
            //  customerChannelId:1,
            //  cuser:1,
            //  cdate:"2020-10-01:01:01:10 注意这是js测试数据，数据正常后需要删除",
            //  amoebaHeavyScales:[
            //    {
            //      id:1,
            //      scale:200,
            //      nextScale:1.1
            //    },
            //     {
            //      id:2,
            //      scale:250,
            //      nextScale:1.2
            //    },
            //    {
            //      id:3,
            //      scale:300,
            //      nextScale:1.3
            //    },
            //     {
            //      id:4,
            //      scale:400,
            //      nextScale:1.4
            //    },
            //  ],
            //  amoebaHeavyWeightRanges:[
            //     {
            //      id:1,
            //      scale:100,
            //      nextScale:1.1
            //    },
            //     {
            //      id:2,
            //      scale:299,
            //      nextScale:1.2
            //    },
            //    {
            //      id:3,
            //      scale:499,
            //      nextScale:1.3
            //    },
            //     {
            //      id:4,
            //      scale:599,
            //      nextScale:1.4
            //    },
            //  ],
            //  amoebaHeavyCargoPriceMap:{
            //    "1_1":0.5,
            //    "1_2":0.5,
            //    "1_3":0.5,
            //    "1_4":0.5,
            //    "2_1":0.5,
            //    "2_2":0.5,
            //    "2_3":0.5,
            //    "2_4":0.5,
            //    "3_1":0.5,
            //    "3_2":0.5,
            //    "3_3":0.5,
            //    "3_4":0.5,
            //    "4_1":0.5,
            //    "4_2":0.5,
            //    "4_3":0.5,
            //    "4_4":0.5,
            //  }
            //   }

            //   for (let index = 0; index < 10; index++) {
            //     this.tableData.push(option)

            //   }

            //   console.log(res);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    delData(id) {
      ajax("delete", { id: id }).then(res => {
        if (res.code == 200) {
          this.$notify.success({
            title: "正常",
            message: "删除成功"
          });
          this.queryList();
        } else {
          this.$notify.error({
            title: "错误",
            message: "删除失败"
          });
        }
      });
    },
    checkData(id) {
      window.open(
        "/#" +
          "/blank" +
          "/amoeba__amoebaBulkyHeavyCargo__main?customerChannelId=" +
          id
      );
    },
    exportAmoebaBulkyHeavyCargo() {
      ajax("exportAmoebaBulkyHeavyCargo", {})
        .then(res => {
          // console.log("res",res)
          if (res.path) {
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              this.$notify.error({
                title: "错误",
                message: "导出失败"
              });
            }
          } else {
            this.$notify.error({
              title: "错误",
              message: res.errorMesage
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    importFile() {
      ajax("exportAmoebaHeavyTemp", {})
        .then(res => {
          //console.log("res",res)
          if (res.path) {
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              this.$notify.error({
                title: "错误",
                message: "导出失败"
              });
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    bacthUpload() {
      this.updateDialogVisible = true;
    },
    handleClose() {
      this.updateDialogVisible = false;
    },
    exportUploadBulkyHeavyFormat() {
      ajax("exportUploadBulkyHeavyFormat", {})
        .then(res => {
          //console.log("res",res)
          if (res.path) {
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              this.$notify.error({
                title: "错误",
                message: "导出失败"
              });
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    uploadFn(params) {
      //自定义上传文件
      console.log(params);
      const file = params.file;
      //fileType = file.type,
      //isImage = fileType.indexOf("pdf") !== -1,
      //isLt4M = file.size / 1024 / 1024 < 4;
      // 这里常规检验，看项目需求而定
      // if (!isImage) {
      //  this.$message.error("只能上传pdf格式!");
      //  return;
      // }

      //if (!isLt4M) {
      //   this.$message.error("只能上传图片大小小于4M");
      //   return;
      //  }
      // 根据后台需求数据格式
      const form = new FormData();
      // 文件对象
      form.append("items[]", file);
      axios({
        method: "post",
        url:
          constant.API_SERVER +
          "/api/consume/upload?uri=" +
          untransform(this.$route.params.uri) +
          "&f=batchUploadAmoebaBulkyHeavyCargo&type=blank",
        data: form
      })
        .then(response => {
          if (response.data.code === 200) {
            //this.feeData.push({mes:response.data.data.fileName,fee:response.data.data.fullFileName});
            this.$notify.success({
              title: "正确",
              message: "上传成功!"
            });
            this.handleClose();
            this.queryList();
          } else {
            this.$notify.error({
              title: "错误",
              message: "上传失败!" + response.data.message
            });
          }
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: "错误",
            message: "上传失败!"
          });
        });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    addRow(){
      for (const i of this.tableData2) {
        if (i.isSet){
          return
        }
      }
      let data = {
        key:{
          isSet:true
        }
      };
      console.log(this.tableTitle)
      this.tableTitle.forEach((item)=>{
        data.key[item.prop] = ''
      })
      this.tableData2.push(JSON.parse(JSON.stringify(data.key)));
      console.log(this.sel)
      console.log(this.tableData2)
      this.sel = JSON.parse(JSON.stringify(data.key));
    },
    inputChange(e,prop) {
      this.sel[prop] = e.target.value;
      console.log(this.sel)
    },
    saveRow(row,index){
      console.log(row)
      if(row.isSet){
        const datas = JSON.parse(JSON.stringify(this.sel));
        for (const k in datas) {
          row[k] = datas[k] //将sel里面的value赋值给这一行。ps(for....in..)的妙用，细心的同学发现这里我并没有循环对象row
        }
        row.isSet = false;
        this.$emit("update:FathersaveRow",row);
      }
    },
    editRow(row){
      for (const i of this.tableData2) {
        if (i.isSet){
          this.$message({
            type: 'warning',
            message: '请保存当前编辑项'
          });
          return;
        }
      }
      this.sel = row
      row.isSet = true
    },
    deleteRow(index, rows, row){
      console.log(row)
      this.$emit("update:FatherdeleteRow",row);
      rows.splice(index, 1);
    }
  }
};
</script>
<style scoped>
.border {
  border: 1px solid #d6e9c6;
  border-radius: 5px;
}
.border_blue {
  border: 1px solid #bce8f1;
  border-radius: 5px;
}
.color {
  background-color: #dff0d8;
  color: #3c763d;
  background-image: linear-gradient(to bottom, #dff0d8 0, #d0e9c6 100%);
}
.color_blue {
  background-color: #d9edf7;
  color: #31708f;
  background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);
}
.el-select {
  width: 100%;
}
.panel-body {
  padding: 20px;
}
.table-data {
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}
.table-data td,
th {
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  height: 22px;
}
</style>
<style lang="scss" >

  .el-table th, .el-table tr {
    background-color: #ffffff;
  }
</style>
